
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Uploader: Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">

.yui3-progressbar {
	width:200px;
	height:20px;
}

.yui3-progressbar .yui3-progressbar-label {
	position:absolute;
	font-size:11px;
	top: 4px;
	left: 5px;
	z-index: 3;
}

.yui3-progressbar .yui3-progressbar-content {
	position:relative;
	width:200px;
	height:20px;
	background:url('assets/active.gif') left center no-repeat;
	z-index: 1;
}

.yui3-progressbar .yui3-progressbar-slider {
	position:absolute;
	width:200px;
	height:20px;
	top: 0px;
	left: 0px;
	background:url('assets/background.gif') left center no-repeat;
	z-index: 2;
}

#selectFilesLink #selectLink,
#uploadFilesLink #uploadLink {
    color: #00c;
    text-decoration: underline;
}
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Uploader: Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Uploader: Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>In this example, the Uploader is used to send multiple files to the server and monitor
   their upload progress with individual progress bars. The example also demonstrates the 
   use of the transparent overlay "Browse" button for the Uploader.</p>
   
<p><strong>Please note:</strong> This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there. </p>	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="uploader-multiple_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<div id="uploaderContainer"> 
	<div id="uploaderOverlay" style="position:absolute; z-index:2"></div> 
	<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div> 
</div> 
<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>

<div id="files">
  <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
	<tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
  </table>	
</div>
<script>


YUI({ filter: 'raw' },{gallery: 'gallery-2010.06.30-19-54'}).use("uploader", 'gallery-progressbar', function(Y) {
	
var uploader;

function init () {
	
var overlayRegion = Y.one("#selectLink").get('region');
Y.log(overlayRegion);
Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);

uploader = new Y.Uploader({boundingBox:"#uploaderOverlay"});	

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
}

Y.on("domready", init);


var setupUploader = function (event) {
	uploader.set("multiFiles", true);
	uploader.set("simLimit", 3);
	uploader.set("log", true);
	
	var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
	
    uploader.set("fileFilters", fileFilters); 
}

var fileSelect = function (event) {
	Y.log("File was selected, parsing...");
	var fileData = event.fileList;	

	for (var key in fileData) {
		var output = "<tr><td>" + fileData[key].name + "</td><td>" + fileData[key].size + "</td><td><div id='div_" + fileData[key].id + "'></div></td></tr>\n";
		Y.one("#filenames").append(output);
		
		var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
		progressBar.render("#div_" + fileData[key].id);
		progressBar.set("progress", 0);
	}
}

var updateProgress = function (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
}

var uploadComplete = function (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", 100);
}

var uploadFile = function (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}

Y.one("#uploadFilesLink").on("click", uploadFile);



});

</script>
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h2 class="first">Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</h2>

<h3>Set up Uploader UI</h3>
<p>In this example, the UI for the Uploader consists of two links, as well as containers for displaying various information about the upload process. Since the Uploader uses Flash, which requires direct user input to show the "Browse" dialog, the "Select Files" link cannot be used to invoke that dialog. Instead, create a container that overlays this link (<code>uploaderOverlay</code>): the instance of Flash player will be placed in that container and made full transparent, thus accepting user input but providing the visual information from the link below it. In addition, create a table for holding the list of selected files (<code>filenames</code>):</p>

<div id="syntax-fc2be6332f26e631e5b634f10bef1352" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;uploaderContainer&quot;</span><span class="sy0">&gt;</span> </div></li><li class="li1"><div class="de1">	<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;uploaderOverlay&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;position:absolute; z-index:2&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span> </div></li><li class="li1"><div class="de1">	<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;selectFilesLink&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;z-index:1&quot;</span><span class="sy0">&gt;&lt;</span>a id<span class="sy0">=</span><span class="st0">&quot;selectLink&quot;</span> href<span class="sy0">=</span><span class="st0">&quot;#&quot;</span><span class="sy0">&gt;</span>Select Files<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span> </div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span> </div></li><li class="li2"><div class="de2"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;uploadFilesLink&quot;</span><span class="sy0">&gt;&lt;</span>a id<span class="sy0">=</span><span class="st0">&quot;uploadLink&quot;</span> href<span class="sy0">=</span><span class="st0">&quot;#&quot;</span><span class="sy0">&gt;</span>Upload Files<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;files&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sy0">&lt;</span>table id<span class="sy0">=</span><span class="st0">&quot;filenames&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;border-width:1px; border-style:solid; padding:5px;&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">	<span class="sy0">&lt;</span>tr<span class="sy0">&gt;&lt;</span>td<span class="sy0">&gt;</span>Filename<span class="sy0">&lt;/</span>td<span class="sy0">&gt;&lt;</span>td<span class="sy0">&gt;</span>File size<span class="sy0">&lt;/</span>td<span class="sy0">&gt;&lt;</span>td<span class="sy0">&gt;</span>Percent uploaded<span class="sy0">&lt;/</span>td<span class="sy0">&gt;&lt;/</span>tr<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">  <span class="sy0">&lt;/</span>table<span class="sy0">&gt;</span>	</div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;uploaderContainer&quot;</span><span class="sy0">&gt;</span> 
	<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;uploaderOverlay&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;position:absolute; z-index:2&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span> 
	<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;selectFilesLink&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;z-index:1&quot;</span><span class="sy0">&gt;&lt;</span>a id<span class="sy0">=</span><span class="st0">&quot;selectLink&quot;</span> href<span class="sy0">=</span><span class="st0">&quot;#&quot;</span><span class="sy0">&gt;</span>Select Files<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span> 
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span> 
<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;uploadFilesLink&quot;</span><span class="sy0">&gt;&lt;</span>a id<span class="sy0">=</span><span class="st0">&quot;uploadLink&quot;</span> href<span class="sy0">=</span><span class="st0">&quot;#&quot;</span><span class="sy0">&gt;</span>Upload Files<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span>
&nbsp;
<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;files&quot;</span><span class="sy0">&gt;</span>
  <span class="sy0">&lt;</span>table id<span class="sy0">=</span><span class="st0">&quot;filenames&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;border-width:1px; border-style:solid; padding:5px;&quot;</span><span class="sy0">&gt;</span>
	<span class="sy0">&lt;</span>tr<span class="sy0">&gt;&lt;</span>td<span class="sy0">&gt;</span>Filename<span class="sy0">&lt;/</span>td<span class="sy0">&gt;&lt;</span>td<span class="sy0">&gt;</span>File size<span class="sy0">&lt;/</span>td<span class="sy0">&gt;&lt;</span>td<span class="sy0">&gt;</span>Percent uploaded<span class="sy0">&lt;/</span>td<span class="sy0">&gt;&lt;/</span>tr<span class="sy0">&gt;</span>
  <span class="sy0">&lt;/</span>table<span class="sy0">&gt;</span>	
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></pre></div><textarea id="syntax-fc2be6332f26e631e5b634f10bef1352-plain"><div id="uploaderContainer"> 
	<div id="uploaderOverlay" style="position:absolute; z-index:2"></div> 
	<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div> 
</div> 
<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>

<div id="files">
  <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
	<tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
  </table>	
</div></textarea></div>
<h3>Create a YUI Instance</h3>
<p>Now that the UI containers and controls are in place, create a YUI instance. Since this example uses the <a href="http://www.yuilibrary.com/gallery/show/progressbar">Progressbar</a> module from <a href="http://www.yuilibrary.com/gallery">YUI Gallery</a> (built by <a href="http://github.com/apipkin/">Anthony Pipkin</a>), we also include the gallery config option among the YUI() arguments, as well as 'gallery-progressbar' in the <code>use</code>statement: </p>

<div id="syntax-8638f15769c28f9f0dbe960ecb0ea1e7" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>gallery<span class="sy0">:</span> <span class="st0">'gallery-2010.06.30-19-54'</span><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;uploader&quot;</span><span class="sy0">,</span> <span class="st0">&quot;gallery-progressbar&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	<span class="co1">// Y is the YUI instance.</span></div></li><li class="li1"><div class="de1">	<span class="co1">// The rest of the code in this tutorial is encapsulated </span></div></li><li class="li1"><div class="de1">	<span class="co1">// in this anonymous function.</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>gallery<span class="sy0">:</span> <span class="st0">'gallery-2010.06.30-19-54'</span><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;uploader&quot;</span><span class="sy0">,</span> <span class="st0">&quot;gallery-progressbar&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
	<span class="co1">// Y is the YUI instance.</span>
	<span class="co1">// The rest of the code in this tutorial is encapsulated </span>
	<span class="co1">// in this anonymous function.</span>
<span class="br0">&#125;</span> <span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-8638f15769c28f9f0dbe960ecb0ea1e7-plain">YUI({gallery: 'gallery-2010.06.30-19-54'}).use("uploader", "gallery-progressbar", function(Y) {
	// Y is the YUI instance.
	// The rest of the code in this tutorial is encapsulated 
	// in this anonymous function.
} );</textarea></div>
<h3>Instantiate the Uploader</h3>
<p>Next, create an instance of the Uploader. Since the Uploader is being placed in a relatively-sized container, subscribe to the <code>domready</code> event and instantiate the uploader in its handler. After instantiating it, add handlers to the uploader events:</p>
	
<div id="syntax-929fa2020e3111d13ebc822603eca96c" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> uploader<span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;domready&quot;</span><span class="sy0">,</span> init<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> init <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">var</span> overlayRegion <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#selectLink&quot;</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'region'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">log</span><span class="br0">&#40;</span>overlayRegion<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#uploaderOverlay&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;offsetWidth&quot;</span><span class="sy0">,</span> overlayRegion.<span class="me1">width</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#uploaderOverlay&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;offsetHeight&quot;</span><span class="sy0">,</span> overlayRegion.<span class="me1">height</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">uploader <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Uploader</span><span class="br0">&#40;</span><span class="br0">&#123;</span>boundingBox<span class="sy0">:</span><span class="st0">&quot;#uploaderOverlay&quot;</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>	</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;uploaderReady&quot;</span><span class="sy0">,</span> setupUploader<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;fileselect&quot;</span><span class="sy0">,</span> fileSelect<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;uploadprogress&quot;</span><span class="sy0">,</span> updateProgress<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;uploadcomplete&quot;</span><span class="sy0">,</span> uploadComplete<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#uploadFilesLink&quot;</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> uploadFile<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> uploader<span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;domready&quot;</span><span class="sy0">,</span> init<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> init <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
<span class="kw2">var</span> overlayRegion <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#selectLink&quot;</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'region'</span><span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">log</span><span class="br0">&#40;</span>overlayRegion<span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#uploaderOverlay&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;offsetWidth&quot;</span><span class="sy0">,</span> overlayRegion.<span class="me1">width</span><span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#uploaderOverlay&quot;</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;offsetHeight&quot;</span><span class="sy0">,</span> overlayRegion.<span class="me1">height</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
uploader <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Uploader</span><span class="br0">&#40;</span><span class="br0">&#123;</span>boundingBox<span class="sy0">:</span><span class="st0">&quot;#uploaderOverlay&quot;</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>	
&nbsp;
uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;uploaderReady&quot;</span><span class="sy0">,</span> setupUploader<span class="br0">&#41;</span><span class="sy0">;</span>
uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;fileselect&quot;</span><span class="sy0">,</span> fileSelect<span class="br0">&#41;</span><span class="sy0">;</span>
uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;uploadprogress&quot;</span><span class="sy0">,</span> updateProgress<span class="br0">&#41;</span><span class="sy0">;</span>
uploader.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;uploadcomplete&quot;</span><span class="sy0">,</span> uploadComplete<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#uploadFilesLink&quot;</span><span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;click&quot;</span><span class="sy0">,</span> uploadFile<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-929fa2020e3111d13ebc822603eca96c-plain">var uploader;
Y.on("domready", init);

function init () {
	
var overlayRegion = Y.one("#selectLink").get('region');
Y.log(overlayRegion);
Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);

uploader = new Y.Uploader({boundingBox:"#uploaderOverlay"});	

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);

Y.one("#uploadFilesLink").on("click", uploadFile);
}</textarea></div>

<h3>Configure the Uploader</h3>
<p>Once the uploader is ready, the <code>setupUploader</code> function is called, and Uploader configuration can be set. For this example, set the <code>multiFiles</code> property to <code>true</code>, allowing the user to select multiple files. Also set the <code>simLimit</code> property to 3, indicating that three files can be uploaded simultaneously. We also set the <code>log</code> property (which allows to see debug output from Flash, only available if running the Flash Debug player), and the <code>fileFilters</code> property, which filters the user's "Browse" dialog to only include files with certain extensions: </p>
	
<div id="syntax-b263468a4c15aad4d753274af52dbc28" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> setupUploader <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;multiFiles&quot;</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;simLimit&quot;</span><span class="sy0">,</span> <span class="nu0">3</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;log&quot;</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> fileFilters <span class="sy0">=</span> <span class="kw2">new</span> Array<span class="br0">&#40;</span><span class="br0">&#123;</span>description<span class="sy0">:</span><span class="st0">&quot;Images&quot;</span><span class="sy0">,</span> extensions<span class="sy0">:</span><span class="st0">&quot;*.jpg;*.png;*.gif&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">	                   <span class="br0">&#123;</span>description<span class="sy0">:</span><span class="st0">&quot;Videos&quot;</span><span class="sy0">,</span> extensions<span class="sy0">:</span><span class="st0">&quot;*.avi;*.mov;*.mpg&quot;</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span> </div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;fileFilters&quot;</span><span class="sy0">,</span> fileFilters<span class="br0">&#41;</span><span class="sy0">;</span> </div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> setupUploader <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span>
	uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;multiFiles&quot;</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
	uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;simLimit&quot;</span><span class="sy0">,</span> <span class="nu0">3</span><span class="br0">&#41;</span><span class="sy0">;</span>
	uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;log&quot;</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="kw2">var</span> fileFilters <span class="sy0">=</span> <span class="kw2">new</span> Array<span class="br0">&#40;</span><span class="br0">&#123;</span>description<span class="sy0">:</span><span class="st0">&quot;Images&quot;</span><span class="sy0">,</span> extensions<span class="sy0">:</span><span class="st0">&quot;*.jpg;*.png;*.gif&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
	                   <span class="br0">&#123;</span>description<span class="sy0">:</span><span class="st0">&quot;Videos&quot;</span><span class="sy0">,</span> extensions<span class="sy0">:</span><span class="st0">&quot;*.avi;*.mov;*.mpg&quot;</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span> 
&nbsp;
    uploader.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;fileFilters&quot;</span><span class="sy0">,</span> fileFilters<span class="br0">&#41;</span><span class="sy0">;</span> 
<span class="br0">&#125;</span></pre></div><textarea id="syntax-b263468a4c15aad4d753274af52dbc28-plain">function setupUploader (event) {
	uploader.set("multiFiles", true);
	uploader.set("simLimit", 3);
	uploader.set("log", true);
	
	var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
	
    uploader.set("fileFilters", fileFilters); 
}</textarea></div>
<h3><code>fileselect</code> Event Handler</h3>
<p>When the user selects files to be uploaded, display the list of selected files in a table. Populate the table with data from the event payload, and reserve a column to display a progress bar for each individual file. Set the initial value of the progress bars to 0, and provide them with custom <code>id</code>'s, so they can be easily updated when upload progress information becomes available.</p>

<div id="syntax-8d6092b8e62a06dad6263daa44e7cc44" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> fileSelect<span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;File was selected, parsing...&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> fileData <span class="sy0">=</span> event.<span class="me1">fileList</span><span class="sy0">;</span>	</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">	<span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> key <span class="kw1">in</span> fileData<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">		<span class="kw2">var</span> output <span class="sy0">=</span> <span class="st0">&quot;&lt;tr&gt;&lt;td&gt;&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="kw3">name</span> <span class="sy0">+</span> <span class="st0">&quot;&lt;/td&gt;&lt;td&gt;&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">size</span> <span class="sy0">+</span> <span class="st0">&quot;&lt;/td&gt;&lt;td&gt;&lt;div id='div_&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">id</span> <span class="sy0">+</span> <span class="st0">&quot;'&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;<span class="es0">\n</span>&quot;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">		Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#filenames&quot;</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span>output<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">		<span class="kw2">var</span> progressBar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ProgressBar</span><span class="br0">&#40;</span><span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;pb_&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">id</span><span class="sy0">,</span> layout <span class="sy0">:</span> <span class="st0">'&lt;div class=&quot;{labelClass}&quot;&gt;&lt;/div&gt;&lt;div class=&quot;{sliderClass}&quot;&gt;&lt;/div&gt;'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">		progressBar.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#div_&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">		progressBar.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;progress&quot;</span><span class="sy0">,</span> <span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> fileSelect<span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span>
	Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;File was selected, parsing...&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw2">var</span> fileData <span class="sy0">=</span> event.<span class="me1">fileList</span><span class="sy0">;</span>	
&nbsp;
	<span class="kw1">for</span> <span class="br0">&#40;</span><span class="kw2">var</span> key <span class="kw1">in</span> fileData<span class="br0">&#41;</span> <span class="br0">&#123;</span>
		<span class="kw2">var</span> output <span class="sy0">=</span> <span class="st0">&quot;&lt;tr&gt;&lt;td&gt;&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="kw3">name</span> <span class="sy0">+</span> <span class="st0">&quot;&lt;/td&gt;&lt;td&gt;&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">size</span> <span class="sy0">+</span> <span class="st0">&quot;&lt;/td&gt;&lt;td&gt;&lt;div id='div_&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">id</span> <span class="sy0">+</span> <span class="st0">&quot;'&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;<span class="es0">\n</span>&quot;</span><span class="sy0">;</span>
		Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#filenames&quot;</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span>output<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
		<span class="kw2">var</span> progressBar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ProgressBar</span><span class="br0">&#40;</span><span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;pb_&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">id</span><span class="sy0">,</span> layout <span class="sy0">:</span> <span class="st0">'&lt;div class=&quot;{labelClass}&quot;&gt;&lt;/div&gt;&lt;div class=&quot;{sliderClass}&quot;&gt;&lt;/div&gt;'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
		progressBar.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#div_&quot;</span> <span class="sy0">+</span> fileData<span class="br0">&#91;</span>key<span class="br0">&#93;</span>.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span>
		progressBar.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;progress&quot;</span><span class="sy0">,</span> <span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="br0">&#125;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-8d6092b8e62a06dad6263daa44e7cc44-plain">function fileSelect(event) {
	Y.log("File was selected, parsing...");
	var fileData = event.fileList;	

	for (var key in fileData) {
		var output = "<tr><td>" + fileData[key].name + "</td><td>" + fileData[key].size + "</td><td><div id='div_" + fileData[key].id + "'></div></td></tr>\n";
		Y.one("#filenames").append(output);
		
		var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
		progressBar.render("#div_" + fileData[key].id);
		progressBar.set("progress", 0);
	}
}</textarea></div>
<h3><code>uploadprogress</code> Event Handler</h3>
<p>When <code>uploadprogress</code> events arrive, update relevant progress bars with the current progress information (note that the event payload contains the id of the file for which the upload progress information is being made available):</p>

<div id="syntax-006525e28549d5af5de25cd1ebbaba27" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> updateProgress <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> pb <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">&#40;</span><span class="st0">&quot;#pb_&quot;</span> <span class="sy0">+</span> event.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	pb.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;progress&quot;</span><span class="sy0">,</span> Math.<span class="me1">round</span><span class="br0">&#40;</span><span class="nu0">100</span> <span class="sy0">*</span> event.<span class="me1">bytesLoaded</span> <span class="sy0">/</span> event.<span class="me1">bytesTotal</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> updateProgress <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span>
	<span class="kw2">var</span> pb <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">&#40;</span><span class="st0">&quot;#pb_&quot;</span> <span class="sy0">+</span> event.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span>
	pb.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;progress&quot;</span><span class="sy0">,</span> Math.<span class="me1">round</span><span class="br0">&#40;</span><span class="nu0">100</span> <span class="sy0">*</span> event.<span class="me1">bytesLoaded</span> <span class="sy0">/</span> event.<span class="me1">bytesTotal</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-006525e28549d5af5de25cd1ebbaba27-plain">function updateProgress (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
}</textarea></div>
<h3>Other Event Handlers</h3>
<p>Once the upload completes, make sure that the specific progress bar has reached 100 percent. Also include the handler for the <code>click</code> event on the upload button, which kicks off the upload process (since the <code>uploadAll()</code> method is being used, the queue will be managed automatically):</p>
	
<div id="syntax-3e8a42822d20cb78442a66aed5141c94" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> uploadComplete <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> pb <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">&#40;</span><span class="st0">&quot;#pb_&quot;</span> <span class="sy0">+</span> event.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	pb.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;progress&quot;</span><span class="sy0">,</span> <span class="nu0">100</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> uploadFile <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	uploader.<span class="me1">uploadAll</span><span class="br0">&#40;</span><span class="st0">&quot;http://www.yswfblog.com/upload/upload_simple.php&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> uploadComplete <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span>
	<span class="kw2">var</span> pb <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">&#40;</span><span class="st0">&quot;#pb_&quot;</span> <span class="sy0">+</span> event.<span class="me1">id</span><span class="br0">&#41;</span><span class="sy0">;</span>
	pb.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;progress&quot;</span><span class="sy0">,</span> <span class="nu0">100</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> uploadFile <span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span>
	uploader.<span class="me1">uploadAll</span><span class="br0">&#40;</span><span class="st0">&quot;http://www.yswfblog.com/upload/upload_simple.php&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-3e8a42822d20cb78442a66aed5141c94-plain">function uploadComplete (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", 100);
}

function uploadFile (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Uploader Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../uploader/uploader-simple.html'>Single File Upload with Progress Tracking and a Sprite-skinned Button</a></li><li class='selected'><a href='../uploader/uploader-multiple.html'>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</a></li><li><a href='../uploader/uploader-withvars.html'>Single File Upload with GET and POST Vars Submission and Server Data Return</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Uploader Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/uploader/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_uploader.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
